<template>
  <div id="invHomeDiv">
    <div class="bodyContent">
      <div class="container">
        <div class="container1">
          <!-- <div class="setting">
            <vxe-form :data="searchForm" class="searchform form-input-m">
              <vxe-form-item title="仓库">
                <el-select v-model="searchForm.storeCode" placeholder="请选择仓库" ref="selectOrgRef" style="width:180px;">
                  <el-option hidden :value="searchForm.storeCode ? searchForm.storeCode : ''" :label="searchForm.storeName"></el-option>
                  <el-tree filterable :data="invStoreList" :props="defaultProps" :expand-on-click-node="false" :default-expand-all="true" @node-click="handleTypeNodeClick" highlight-current ref="orgTreeRef" node-key="storeCode" class="tools-tree"></el-tree>
                </el-select>
              </vxe-form-item>

            </vxe-form>
            <span class="setting-2">
              <img src="@/assets/equipment/searchChart.png" style="margin-right: 10px;">
              <span>查询范围</span>
              <CaretRight style="width: 1.3em; height: 1.3em; margin-left: 8px;" />

              
            </span> 
          </div> -->
          <div class="sub-container">
            <div class="item-0">
              <h3>常用功能</h3>
            </div>
            <div class="item" href="" @click="gotoInvOrderInfo">
              <div class="jump">
                <img src="@/assets/equipment/useFunc1.png">
                <p>自助类型管理</p>
              </div>
            </div>
            <div class="item" href="" @click="gotoInvAllotJoin">
              <div class="jump">
                <img src="@/assets/equipment/useFunc2.png">
                <p>自助功能管理</p>
              </div>
            </div>
            <div class="item" href="" @click="gotoInvAllotOut">
              <div class="jump">
                <img src="@/assets/equipment/useFunc3.png">
                <p>自助机管理</p>
              </div>
            </div>
          </div>
        </div>
        <div class="container2">
          <div id="normalDeviceChart" class="chart" style="margin-top: 90px;">
          </div>
          <div class="deviceData">
            <div class="deviceDataBlock">
              <div class="deviceDataBlock_top" href="" @click="gotoInvAllotOut">
                <!-- <span class="num">{{personalAgency.equiptCnt}}</span> -->
                <span class="num">{{ callNumAgency.allCnt }}</span>
                <span class="unit">台</span>
              </div>
              <div class="deviceDataBlock_down">自助机总数</div>
            </div>
            <div class="deviceDataBlock">
              <div class="deviceDataBlock_top deviceDataBlock_top2" href="" @click="gotoInvAllotOut">
                <!-- <span class="num">{{personalAgency.equiptRepairCnt}}</span> -->
                <span class="num">{{ callNumAgency.runCnt }}</span>
                <span class="unit">台</span>
              </div>
              <div class="deviceDataBlock_down">未运行台数</div>
            </div>
          </div>
        </div>
        <div class="container3">
          <div class="item-0">
            <h3>个人待办事项</h3>
          </div>
          <div class="title-1">
            <div>自助机管理</div>
          </div>
          <div class="container3-1">
            <div class="sub-container">
              <!-- zeroPoint动态类名 若取值是0 则不可点击 没有Hover效果 -->
              <!-- dataPoint动态类名 若取值不是0 则点击有Hover效果 -->
              <div class="item" href=""
                :style="!isEmpty(invOrderAgency) && invOrderAgency.inOrderCnt > 0 ? 'pointer-events: auto;' : 'pointer-events: none;'"
                @click="gotoInvOrderInfo">
                <img src="@/assets/equipment/todoTask1.png">
                <span>自助机类型管理</span>
                <span :class="!isEmpty(invOrderAgency) && invOrderAgency.inOrderCnt > 0 ? 'numHas' : 'numNot'">{{
                  invOrderAgency.inOrderCnt }}</span>
              </div>
              <div class="item" href=""
                :style="!isEmpty(invOrderAgency) && invOrderAgency.dbInCnt > 0 ? 'pointer-events: auto;' : 'pointer-events: none;'"
                @click="gotoInvAllotJoin()">
                <img src="@/assets/equipment/todoTask2.png">
                <span>功能管理</span>
                <span :class="!isEmpty(invOrderAgency) && invOrderAgency.dbInCnt > 0 ? 'numHas' : 'numNot'">{{
                  invOrderAgency.dbInCnt }}</span>
              </div>
              <div class="item" href=""
                :style="!isEmpty(invOrderAgency) && invOrderAgency.dbOutCnt > 0 ? 'pointer-events: auto;' : 'pointer-events: none;'"
                @click="gotoInvAllotOut()">
                <img src="@/assets/equipment/todoTask2.png">
                <span>自助机管理</span>
                <span :class="!isEmpty(invOrderAgency) && invOrderAgency.dbOutCnt > 0 ? 'numHas' : 'numNot'">{{
                  invOrderAgency.dbOutCnt }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="container6">
          <div class="title">
            <h3>自助机预警</h3>
          </div>
          <div id="stockExpiryChart" class="chart"></div>
        </div>

        <div class="container6">
          <div class="title">
            <img src="@/assets/equipment/warning.png">
            <h3 class="red">自助机类型</h3>
          </div>
          <div id="lowStorageChar" class="chart"></div>
        </div>
        <div class="container6">
          <div class="title">
            <img src="@/assets/equipment/warning.png">
            <h3 class="red">自助机功能</h3>
          </div>
          <div id="highStorageChar" class="chart"></div>
        </div>
      </div>
    </div>

    <!-- 切换仓库 -->
    <InvStoreChange ref="InvStoreChangeRef" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, watch, onMounted } from 'vue';
import * as echarts from 'echarts';
import { isEmpty } from 'lodash';

let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store';
import { enums } from '@/enums/enumerator.js';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import InvStoreChange from '@/views/inv_sys/inv_bus/InvStoreChange.vue';

let store = AppStore();
/**切换仓库弹窗组件对象 */
const InvStoreChangeRef = ref(null);
let invOrderAgency: any = ref({});
let personalAgency: any = ref({});
let personalAgency2: any = ref({});
let realityCount = ref(0);
let realityInspected = ref(0);
let completionRate = ref('');
let abnormalRate = ref('');
let invStoreList: any = reactive([]);
let defaultProps = {
  children: 'children',
  label: 'storeName'
};

let searchForm = reactive({
  storeCode: !isEmpty(store.curInvStoreObj) && !isEmpty(store.curInvStoreObj.storeCode) ? store.curInvStoreObj.storeCode : '',
  storeName: !isEmpty(store.curInvStoreObj) && !isEmpty(store.curInvStoreObj.storeName) ? store.curInvStoreObj.storeName : '',
  reaNo: '',
  reaNa: '',
  manufacturerNo: ''
});

onMounted(() => {
  getMachineList();
  // findStoreManageTree();

  //个人代办事项
  //initPersonalAgency2();

  // 综合事务故障统计
  //initComprehensive();
});

watch(
  () => store.curInvStoreObj,
  (n: any, o: any) => {
    // 将获取的新值动态赋给layoutcolor
    if (searchForm.storeCode != n.storeCode) {
      searchForm.storeCode = n.storeCode;
      searchForm.storeName = n.storeName;
      setCurOrgTreeNode(searchForm.storeCode);
      initHomeInfo();
    }
  },
  { deep: true, immediate: true }
);

let callNumAgency: any = ref({});

//查询搜索报告单元列表
function getMachineList() {
  const url = '/self/machine/findMachines';
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code === 1) {
        callNumAgency.value = res.data;

        //完好设备占比
        initDeviceNum();
      } else {
        console.log('111');
      }
    })
    .catch((err: any) => {
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}


function findStoreManageTree() {
  invStoreList.length = 0;
  const url = '/inv/storeManage/findStoreManageTree';
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code !== 1) {
        proxy.$alert(res.status.msg, '提示');
      } else {
        invStoreList.push(...res.data.invStoreTree);

        if (!isEmpty(searchForm.storeCode)) {
          initHomeInfo();
          setCurOrgTreeNode(searchForm.storeCode);
        } else {
          InvStoreChangeRef.value?.initPage();
        }
      }
    })
    .catch((err: any) => {
      VxeMessage('获取机构失败', VxeNotifyType.error);
    });
}

// 获取children那条数据
function getChildren(obj: any) {
  const children = obj.children;
  return children[0];
}

function initHomeInfo() {
  initInvOrderAgency();
  findHighStorageList();
  findLowStorageList();
  findStockToprList();
  findStockExpiryList();
}

function initInvOrderAgency() {
  const url = '/inv/orderInfo/getInvOrderAgency';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        storeCode: searchForm.storeCode
      }
    })
    .then((res: any) => {
      if (res.status.code === 1) {
        invOrderAgency.value = res.data;

        //完好设备占比
        initDeviceNum();
      } else {
        console.log('111');
      }
    })
    .catch((err: any) => {
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function findLowStorageList() {
  const url = '/inv/invReagentStock/findLowStorageList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        storeCode: searchForm.storeCode,
        reaNo: searchForm.reaNo,
        manufacturerNo: searchForm.manufacturerNo
      }
    })
    .then((res: any) => {
      const groupsData = [];
      let product = ['product', '在库数量', '最小库存量', '超限数量'];
      groupsData.push(product);
      res.data.forEach((group: any) => {
        let dateData = [];
        dateData.push(group.reaNa);
        dateData.push(group.quantity);
        dateData.push(group.miniStock);
        dateData.push(group.overrunNum);
        groupsData.push(dateData);
      });
      initLowStorageChart(groupsData);
    })
    .catch((err: any) => {
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function initLowStorageChart(data) {
  var app = {};
  if (echarts.getInstanceByDom(document.getElementById('lowStorageChar') as HTMLElement)) {
    echarts.dispose(document.getElementById('lowStorageChar') as HTMLElement);
  }
  var chartDom = document.getElementById('lowStorageChar');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: data
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
  };

  option && myChart.setOption(option);
}

function findHighStorageList() {
  const url = '/inv/invReagentStock/findHighStorageList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        storeCode: searchForm.storeCode
      }
    })
    .then((res: any) => {
      const groupsData = [];
      let product = ['product', '在库数量', '最大库存量', '超限数量'];
      groupsData.push(product);
      res.data.forEach((group: any) => {
        let dateData = [];
        dateData.push(group.reaNa);
        dateData.push(group.quantity);
        dateData.push(group.maxStock);
        dateData.push(group.overrunNum);
        groupsData.push(dateData);
      });
      initHighStorageChart(groupsData);
    })
    .catch((err: any) => {
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}
function initHighStorageChart(data) {
  var app = {};
  if (echarts.getInstanceByDom(document.getElementById('highStorageChar') as HTMLElement)) {
    echarts.dispose(document.getElementById('highStorageChar') as HTMLElement);
  }
  var chartDom = document.getElementById('highStorageChar');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: data
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
  };

  option && myChart.setOption(option);
}
function findStockToprList() {
  const url = '/inv/invReagentStock/findStockToprList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        storeCode: searchForm.storeCode
      }
    })
    .then((res: any) => {
      initStockToprChart(res.data);
    })
    .catch((err: any) => {
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function initStockToprChart(data) {
  if (echarts.getInstanceByDom(document.getElementById('stockToprChart') as HTMLElement)) {
    echarts.dispose(document.getElementById('stockToprChart') as HTMLElement);
  }

  var chartDom = document.getElementById('stockToprChart');
  var myChart = echarts.init(chartDom);

  const seriesData = [];

  for (const s of data) {
    seriesData.push({ label: s.reaNa, value: s.quantity });
  }
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '30px',
      bottom: '30px',
      left: '50px',
      right: '30px'
    },
    xAxis: {
      type: 'category',
      data: data.map((a) => a.reaNa),
      axisLabel: {
        interval: 0,
        //坐标轴刻度标签的相关设置。
        formatter: function (params) {
          var newParamsName = ''; // 最终拼接成的字符串
          var paramsNameNumber = params.length; // 实际标签的个数
          var provideNumber = 5; // 每行能显示的字的个数
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
          /**
           * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
           */
          // 条件等同于rowNumber>1
          if (paramsNameNumber > provideNumber) {
            newParamsName = params.substring(0, provideNumber) + '...';
            /** 循环每一行,p表示行 */
            // for (var p = 0; p < rowNumber; p++) {
            //   var tempStr = ''; // 表示每一次截取的字符串
            //   var start = p * provideNumber; // 开始截取的位置
            //   var end = start + provideNumber; // 结束截取的位置
            //   // 此处特殊处理最后一行的索引值
            //   if (p === rowNumber - 1) {
            //     // 最后一次不换行
            //     tempStr = params.substring(start, paramsNameNumber);
            //   } else {
            //     // 每一次拼接字符串并换行
            //     tempStr = params.substring(start, end) + '\n';
            //   }
            //   newParamsName += tempStr; // 最终拼成的字符串
            // }
          } else {
            // 将旧标签的值赋给新标签
            newParamsName = params;
          }
          //将最终的字符串返回
          return newParamsName;
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: seriesData,
        type: 'bar',
        label: {
          show: true,
          // rotate: 90,
          color: '#fff'
        },
        barWidth: '50%',
        itemStyle: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                { offset: 0, color: '#12dce3' },
                { offset: 1, color: '#1671cc' }
              ],
              false
            );
          }
        }
      }
    ]
  };
  myChart.setOption(option, true);
  setTimeout(() => {
    myChart.resize({ width: null, height: null });
  }, 300);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
}

function findStockExpiryList() {
  const url = '/inv/invReagentStock/findStockExpiryList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        storeCode: searchForm.storeCode
      }
    })
    .then((res: any) => {
      initStockExpiryChart(res.data);
    })
    .catch((err: any) => {
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function initStockExpiryChart(data) {
  if (echarts.getInstanceByDom(document.getElementById('stockExpiryChart') as HTMLElement)) {
    echarts.dispose(document.getElementById('stockExpiryChart') as HTMLElement);
  }

  var chartDom = document.getElementById('stockExpiryChart');
  var myChart = echarts.init(chartDom);

  const seriesData = [];

  for (const s of data) {
    seriesData.push({ label: s.reaNa, value: s.quantity });
  }
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '30px',
      bottom: '30px',
      left: '50px',
      right: '30px'
    },
    xAxis: {
      type: 'category',
      data: data.map((a) => a.reaNa),
      axisLabel: {
        interval: 0,
        //坐标轴刻度标签的相关设置。
        formatter: function (params) {
          var newParamsName = ''; // 最终拼接成的字符串
          var paramsNameNumber = params.length; // 实际标签的个数
          var provideNumber = 5; // 每行能显示的字的个数
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
          /**
           * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
           */
          // 条件等同于rowNumber>1
          if (paramsNameNumber > provideNumber) {
            newParamsName = params.substring(0, provideNumber) + '...';
            /** 循环每一行,p表示行 */
            // for (var p = 0; p < rowNumber; p++) {
            //   var tempStr = ''; // 表示每一次截取的字符串
            //   var start = p * provideNumber; // 开始截取的位置
            //   var end = start + provideNumber; // 结束截取的位置
            //   // 此处特殊处理最后一行的索引值
            //   if (p === rowNumber - 1) {
            //     // 最后一次不换行
            //     tempStr = params.substring(start, paramsNameNumber);
            //   } else {
            //     // 每一次拼接字符串并换行
            //     tempStr = params.substring(start, end) + '\n';
            //   }
            //   newParamsName += tempStr; // 最终拼成的字符串
            // }
          } else {
            // 将旧标签的值赋给新标签
            newParamsName = params;
          }
          //将最终的字符串返回
          return newParamsName;
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: seriesData,
        type: 'bar',
        label: {
          show: true,
          // rotate: 90,
          color: '#fff'
        },
        barWidth: '50%',
        itemStyle: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                { offset: 0, color: '#12dce3' },
                { offset: 1, color: '#1671cc' }
              ],
              false
            );
          }
        }
      }
    ]
  };
  myChart.setOption(option, true);
  setTimeout(() => {
    myChart.resize({ width: null, height: null });
  }, 300);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
}

function initPersonalAgency2() {
  const url = '/api/eq/eqEquiptHome/getPersonalAgency2';
  proxy.$http
    //注意此处的数据条数
    .get(url)
    .then((res: any) => {
      if (res.status.code === 1) {
        personalAgency2.value = res.data;

        // 设备维修
        initDeviceFix();

        // 设备保养
        initDeviceMaintain();
        //巡检任务概况
        initPolling();
        //巡检设备概况
        initPollingDevice();
      } else {
        console.log('111');
      }
    })
    .catch((err: any) => {
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

//完好设备占比
function initDeviceNum() {
  const myChart = echarts.init(document.getElementById('normalDeviceChart') as HTMLElement);
  myChart.setOption({
    // backgroundColor: "#fff",
    series: [
      {
        name: '刻度',
        type: 'gauge', //仪表盘类型图表
        radius: '83%',
        min: 0, //最小刻度
        max: 100, //最大刻度
        splitNumber: 10, //主刻度数量
        startAngle: 180,
        endAngle: 0,
        axisLine: {
          show: true,
          lineStyle: {
            width: 5,
            type: 'dashed',
            color: [[1, '#4ec8de']]
          }
        }, //仪表盘轴线
        axisLabel: {
          show: false
        }, //刻度标签文字
        axisTick: {
          show: false
        }, //子刻度样式
        splitLine: {
          show: true,
          length: -20,
          lineStyle: {
            color: '#4ec8de'
          }
        }, //分隔线样式
        detail: {
          show: false
        }, //仪表盘详情设置
        pointer: {
          show: false
        } //指针配置
      },
      {
        type: 'gauge',
        radius: '65%',
        center: ['50%', '50%'],
        splitNumber: 0, //刻度数量 不显示主刻度
        startAngle: 180,
        endAngle: 0,
        axisLine: {
          show: true,
          lineStyle: {
            width: 30,
            color: [
              [
                0.77, //此处改变值 动态值
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#2ab5ae'
                  },
                  {
                    offset: 1,
                    color: '#5fd7e4'
                  }
                ])
              ],
              [1, '#d6dada']
            ]
          }
        },
        splitLine: {
          show: false
        }, //分隔线样式
        axisLabel: {
          show: false
        }, //刻度标签
        axisTick: {
          show: false
        }, //子刻度线
        pointer: {
          show: false
        }, //指针
        title: {
          show: true,
          offsetCenter: [0, '-26%'], // x, y，单位px
          textStyle: {
            color: '#2bb7b0',
            fontSize: 20
          }
        },
        //仪表盘详情，用于显示数据
        detail: {
          show: true,
          offsetCenter: [0, '-20%'],
          color: '#ffffff',
          formatter: function (params: any) {
            return params + '%';
          },
          textStyle: {
            color: '#50c1bb',
            fontSize: 44
          }
        },
        data: [
          {
            name: '',
            value: !isEmpty(callNumAgency) ? (((callNumAgency.value.allCnt - callNumAgency.value.runCnt) / callNumAgency.value.allCnt) * 100).toFixed(2) : '22'
          }
        ]
      }
    ]
  });

  window.addEventListener('resize', function () {
    myChart.resize();
  });
}

// 设备维修
function initDeviceFix() {
  let echartData = [
    {
      value: 0,
      name: '待维修'
    },
    {
      value: 0,
      name: '维修中'
    },
    {
      value: 0,
      name: '待验证'
    }
  ];
  let repairZCnt = 0;
  let repairIng = 0;
  if (personalAgency2.value.repairStatusCntList.length > 0) {
    for (const aa of personalAgency2.value.repairStatusCntList) {
      if (aa.repairStatus == '0') {
        echartData[0].value = aa.repairStatusCnt;
        repairZCnt += aa.repairStatusCnt;
      } else if (aa.repairStatus == '20') {
        echartData[2].value = aa.repairStatusCnt;
        repairZCnt += aa.repairStatusCnt;
      } else if (aa.repairStatus == '25') {
        console.log('已完成');
      } else {
        repairIng += aa.repairStatusCnt;
        repairZCnt += aa.repairStatusCnt;
      }
    }
    echartData[1].value = repairIng;
  }

  if (echarts.getInstanceByDom(document.getElementById('repairChart') as HTMLElement)) {
    echarts.dispose(document.getElementById('repairChart') as HTMLElement);
  }
  const myChart3 = echarts.init(document.getElementById('repairChart') as HTMLElement);
  let colorList = ['#ed755b', '#fa9d53', '#fdcd51', '#20c0a2', '#4b78e4'];

  //处理图例legend格式数据
  let formatterData = [];
  for (let i in echartData) {
    echartData[i]['name'] = '\r\r\r' + echartData[i]['name'] + '\r\r\r\r\r\r' + echartData[i]['value'];
    formatterData.push(echartData[i]['name']);
  }
  myChart3.setOption({
    title: {
      text: repairZCnt + '个\n\n{noFix|未修复}',
      subtext: '今日新增 +' + personalAgency2.value.repairJRXZCnt,
      x: 'center',
      y: '30%',
      textStyle: {
        fontSize: '30px',
        rich: {
          noFix: {
            color: '#666666',
            fontSize: '26px'
          }
        }
      },
      subtextStyle: {
        color: '#f5545c',
        fontSize: '30px',
        lineHeight: 80
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (parms: any) {
        let str = '维修状态' + '</br>' + parms.marker + '' + parms.data.name;
        return str;
      }
    },

    legend: [
      {
        top: 'middle',
        right: '3%',
        orient: 'vertical',
        icon: 'circle',
        itemWidth: 12,
        itemGap: 25,
        textStyle: {
          fontSize: 14
        },
        itemStyle: {
          borderWidth: 4
        },
        data: formatterData
      }
    ],
    series: [
      {
        type: 'pie',
        radius: ['60%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        padAngle: 1,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          color: function (params: any) {
            return colorList[params.dataIndex];
          },
          borderWidth: 6,
          borderColor: '#fff'
        },
        data: echartData
      }
    ]
  });
  window.addEventListener('resize', function () {
    myChart3.resize();
  });
}

// 综合事务故障统计
function initComprehensive() {
  const myChart4 = echarts.init(document.getElementById('ComprehensiveChart') as HTMLElement);
  myChart4.setOption({
    title: {
      left: '1%',
      text: '故障次数:1',
      textStyle: {
        fontSize: '14px'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['灯具'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: '10%',
        data: [1]
      }
    ]
  });
  window.addEventListener('resize', function () {
    myChart4.resize();
  });
}

//设备保养
function initDeviceMaintain() {
  let echartData = [
    {
      value: 0,
      name: '待保养'
    },
    {
      value: 0,
      name: '保养中'
    },
    {
      value: 0,
      name: '待验证'
    }
  ];

  let maintainZCnt = 0;
  if (personalAgency2.value.maintainStatusCntList.length > 0) {
    for (const aa of personalAgency2.value.maintainStatusCntList) {
      if (aa.maintainStatus == '0') {
        echartData[0].value = aa.maintainStatusCnt;
        maintainZCnt += aa.maintainStatusCnt;
      } else if (aa.maintainStatus == '5') {
        echartData[1].value = aa.maintainStatusCnt;
        maintainZCnt += aa.maintainStatusCnt;
      } else if (aa.maintainStatus == '10') {
        echartData[2].value = aa.maintainStatusCnt;
        maintainZCnt += aa.maintainStatusCnt;
      }
    }
  }

  if (echarts.getInstanceByDom(document.getElementById('MaintainChart') as HTMLElement)) {
    echarts.dispose(document.getElementById('MaintainChart') as HTMLElement);
  }

  const myChart5 = echarts.init(document.getElementById('MaintainChart') as HTMLElement);
  let colorList = ['#ffc855', '#98e79b', '#00b29a', '#5e81ec'];

  //处理图例legend格式数据
  let formatterData = [];
  for (let i in echartData) {
    echartData[i]['name'] = '\r\r\r' + echartData[i]['name'] + '\r\r\r\r\r\r\r\r' + echartData[i]['value'];
    formatterData.push(echartData[i]['name']);
  }
  myChart5.setOption({
    title: {
      subtext: '\r\r\r\r' + maintainZCnt + '\n{total|总台数}',
      x: '37%',
      y: '38%',
      subtextStyle: {
        fontSize: '30px',
        rich: {
          total: {
            color: '#858b96',
            fontSize: '30px',
            lineHeight: 80,
            align: 'center'
          }
        }
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (parms: any) {
        let str = '保养状态' + '</br>' + parms.marker + '' + parms.data.name;
        return str;
      }
    },
    legend: [
      {
        top: 'middle',
        right: '0%',
        orient: 'vertical',
        icon: 'circle',
        itemWidth: 12,
        itemGap: 13,
        textStyle: {
          fontSize: 14,
          rich: {}
        },
        data: formatterData
      }
    ],
    series: [
      {
        type: 'pie',
        radius: ['60%', '70%'],
        center: ['45%', '50%'],
        avoidLabelOverlap: false,
        padAngle: 1,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          color: function (params: any) {
            return colorList[params.dataIndex];
          }
        },
        borderWidth: 6,
        borderColor: '#fff',
        data: echartData
      }
    ]
  });
  window.addEventListener('resize', function () {
    myChart5.resize();
  });
}

//巡检任务概况
function initPolling() {
  const myChart6 = echarts.init(document.getElementById('pollingChart') as HTMLElement);
  let colorList = ['#01b29a', '#f9734e', '#98e79b'];
  let echartData = [
    {
      value: 0,
      name: '待巡检'
    },
    {
      value: 0,
      name: '巡检中'
    },
    {
      value: 0,
      name: '待验证'
    }
  ];
  let maintainZCnt = 0;
  let realityPatrolCn = 0;
  if (personalAgency2.value.patrolTaskCnList.length > 0) {
    for (const aa of personalAgency2.value.patrolTaskCnList) {
      if (aa.status == '0') {
        echartData[0].value = aa.repairStatusCnt;
        maintainZCnt += aa.repairStatusCnt;
      } else if (aa.status == '5') {
        echartData[1].value = aa.repairStatusCnt;
        maintainZCnt += aa.repairStatusCnt;
        realityPatrolCn += aa.repairStatusCnt;
      } else if (aa.status == '10') {
        echartData[2].value = aa.repairStatusCnt;
        maintainZCnt += aa.repairStatusCnt;
        realityPatrolCn += aa.repairStatusCnt;
      }
    }
  }
  realityCount.value = realityPatrolCn;
  // 计算百分比
  let percentage = (realityPatrolCn / maintainZCnt) * 100;
  // 保留小数点后两位
  let formattedPercentage = percentage === 0 ? percentage : percentage.toFixed(2);
  completionRate.value = formattedPercentage + '%';

  //处理图例legend格式数据
  let formatterData = [];
  for (let i in echartData) {
    echartData[i]['name'] = '\r\r\r' + echartData[i]['name'] + '\r\r\r\r\r\r\r\r' + echartData[i]['value'];
    formatterData.push(echartData[i]['name']);
  }
  myChart6.setOption({
    title: {
      subtext: '\r\r\r\r' + maintainZCnt + '\n{total|巡检次数}',
      x: '33%',
      y: '30%',
      subtextStyle: {
        fontSize: '30px',
        rich: {
          total: {
            color: '#858b96',
            fontSize: '30px',
            lineHeight: 80,
            align: 'center'
          }
        }
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (parms: any) {
        let str = '巡检任务概况' + '</br>' + parms.marker + '' + parms.data.name;
        return str;
      }
    },
    legend: [
      {
        top: 'middle',
        right: '0%',
        orient: 'vertical',
        icon: 'circle',
        itemWidth: 12,
        itemGap: 13,
        textStyle: {
          fontSize: 14,
          rich: {}
        },
        data: formatterData
      }
    ],
    series: [
      {
        type: 'pie',
        radius: ['80%', '90%'],
        center: ['45%', '50%'],
        avoidLabelOverlap: false,
        padAngle: 1,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          color: function (params: any) {
            return colorList[params.dataIndex];
          }
        },
        borderWidth: 6,
        borderColor: '#fff',
        data: echartData
      }
    ]
  });
  window.addEventListener('resize', function () {
    myChart6.resize();
  });
}

// 巡检设备概况
function initPollingDevice() {
  const myChart7 = echarts.init(document.getElementById('pollingDeviceChart') as HTMLElement);
  let colorList = ['#01b29a', '#f9734e', '#98e79b'];
  let echartData = [
    {
      value: 1,
      name: '未检设备'
    },
    {
      value: 0,
      name: '异常设备'
    },
    {
      value: 0,
      name: '正常设备'
    }
  ];
  let shouldInspected = 0;
  if (!isEmpty(personalAgency2.value.eqPatrolTaskEqInfo)) {
    const data = personalAgency2.value.eqPatrolTaskEqInfo;
    echartData[0].value = data.noPassCount;
    echartData[1].value = data.noDetecttionCount;
    echartData[2].value = data.rigntCount;
    shouldInspected = data.shouldInspected;
    realityInspected.value = data.realityInspected;

    // 计算百分比
    let percentage = (data.noDetecttionCount / shouldInspected) * 100;
    // 保留小数点后两位
    let formattedPercentage = percentage === 0 ? percentage : percentage.toFixed(2);
    abnormalRate.value = formattedPercentage + '%';
  }
  //处理图例legend格式数据
  let formatterData = [];
  for (let i in echartData) {
    echartData[i]['name'] = '\r\r\r' + echartData[i]['name'] + '\r\r\r\r\r\r\r\r' + echartData[i]['value'];
    formatterData.push(echartData[i]['name']);
  }
  myChart7.setOption({
    title: {
      subtext: '\r\r\r\r' + shouldInspected + '\n{total|应检设备}',
      x: '33%',
      y: '30%',
      subtextStyle: {
        fontSize: '30px',
        rich: {
          total: {
            color: '#858b96',
            fontSize: '30px',
            lineHeight: 80,
            align: 'center'
          }
        }
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (parms: any) {
        let str = '巡检设备概况' + '</br>' + parms.marker + '' + parms.data.name;
        return str;
      }
    },
    legend: [
      {
        top: 'middle',
        right: '0%',
        orient: 'vertical',
        icon: 'circle',
        itemWidth: 12,
        itemGap: 13,
        textStyle: {
          fontSize: 14,
          rich: {}
        },
        data: formatterData
      }
    ],
    series: [
      {
        type: 'pie',
        radius: ['80%', '90%'],
        center: ['45%', '50%'],
        avoidLabelOverlap: false,
        padAngle: 1,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          color: function (params: any) {
            return colorList[params.dataIndex];
          }
        },
        borderWidth: 6,
        borderColor: '#fff',
        data: echartData
      }
    ]
  });
  window.addEventListener('resize', function () {
    myChart7.resize();
  });
}

function gotoInvOrderInfo() {
  const data = {
    url: '/invHome',
    orderStatus: '5'
  };
  proxy.$router.push({ path: '/slef/SelfMachineType', query: data });
}

function gotoInvAllotJoin() {
  const data = {
    url: '/invHome',
    orderStatus: '5'
  };
  proxy.$router.push({ path: '/selfFunction', query: data });
}

function gotoInvAllotOut() {
  const data = {
    url: '/invHome',
    orderStatus: '5'
  };
  proxy.$router.push({ path: '/slef/SelfMachine', query: data });
}

function gotoInvOrderOut() {
  const data = {
    url: '/invHome',
    orderStatus: '5'
  };
  proxy.$router.push({ path: '/invOrderOut', query: data });
}

function gotoInvopenemptyboxload() {
  const data = {
    url: '/invHome'
  };
  proxy.$router.push({ path: '/invopenemptyboxload', query: data });
}
function gotoInvReagentStock() {
  const data = {
    url: '/invHome'
  };
  proxy.$router.push({ path: '/invReagentStock', query: data });
}

function gotoInvReagentStockExpiry() {
  const data = {
    url: '/invHome'
  };
  proxy.$router.push({ path: '/invReagentStockExpiry', query: data });
}

function gotoInvLowStorage() {
  const data = {
    url: '/invHome'
  };
  proxy.$router.push({ path: '/invLowStorage', query: data });
}

function gotoInvHighStorage() {
  const data = {
    url: '/invHome'
  };
  proxy.$router.push({ path: '/invHighStorage', query: data });
}

function gotoRepairOrder() {
  const data = {
    url: '/equiptHome'
  };
  proxy.$router.push({ path: '/eqRepairOrder', query: data });
}
function gotoMaintainOrder() {
  const data = {
    url: '/equiptHome'
  };
  proxy.$router.push({ path: '/eqMaintainOrder', query: data });
}
function gotoMaintainPlan() {
  const data = {
    url: '/equiptHome'
  };
  proxy.$router.push({ path: '/eqMaintainPlan', query: data });
}

function gotoRepairPlan() {
  const data = {
    url: '/equiptHome'
  };
  proxy.$router.push({ path: '/eqRepairPlan', query: data });
}

// 光标定位在指定字典分类上
function setCurOrgTreeNode(nodeId: any) {
  console.log(nodeId);

  proxy.$nextTick(() => {
    const treeName = 'orgTreeRef';
    const tree: any = proxy.$refs[treeName];
    tree.setCurrentKey(nodeId);
  });
}

function handleTypeNodeClick(data: any) {
  searchForm.storeCode = data.storeCode;
  searchForm.storeName = data.storeName;
  const selectOrgRef: any = proxy.$refs['selectOrgRef'];
  selectOrgRef.blur();
  initHomeInfo();
}


function gotoEqEquipment() {
  const data = {
    url: '/equiptHome'
  };
  proxy.$router.push({ path: '/eqEquipment', query: data });
}

</script>
<style lang="scss" scoped>
#invHomeDiv {
  width: 100%;
  // height: 100%;

  .bodyContent {
    width: calc(100% - 20px);
    height: calc(100% - 20px);

    .container {
      width: calc(100% - 40px);
      display: grid;
      grid-template-columns: repeat(3, 33.3%);
      // grid-template-rows: 110px 85px 310px 170px 220px 390px 390px;
      grid-gap: 20px;

      .chart {
        width: 100%;
        height: 400px;
        cursor: pointer;
      }

      .noData {
        height: 320px;

        img {
          height: 70%;
          margin: 0 auto 30px auto !important;
        }
      }

      .container1 {
        background-color: $base-white;

        .setting {
          height: 33px;
          background-color: #f3f3f3;
          vertical-align: middle;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 10px;

          .setting-2 {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            &:hover {
              height: 33px;
              background-color: $base-white;
            }
          }
        }

        .sub-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: 1fr 2fr 2fr 2fr;
          grid-row-gap: 15px;
          grid-column-gap: 40px;
          align-items: center;
          height: calc(100% - 33px);

          .item-0 {
            grid-row: 1 / 2;
            grid-column: 1 / 4;
            padding-left: 20px;
            font-weight: 700;
            font-size: 20px;
            color: #000;
          }

          .jump {
            width: 112px;
            margin: auto;
            text-align: center;
            padding: 10px;
            cursor: pointer;

            &:hover {
              background-color: #f5f6f7;
            }
          }
        }
      }

      .container2 {
        background-color: #f3f3f3;
        position: relative;
        // grid-row: 1 / 4;
        // grid-column: 2 / 3;

        .deviceData {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 180px;

          .deviceDataBlock {
            padding: 0;
            width: 50%;
            display: inline-block;
            text-align: center;

            .deviceDataBlock_top {
              font-size: 18px;
              color: #222;
              font-weight: 500;
              margin-bottom: 5px;

              .num {
                font-size: 37px;
                cursor: pointer;
              }

              .unit {
                font-size: 18px;
                font-weight: 600;
                color: #222222;
              }
            }

            .deviceDataBlock_top2 {
              color: #f35c52;
            }

            .deviceDataBlock_down {
              color: #3d566d;
              font-size: 18px;
              font-family: monospace;
              font-weight: 600;
            }
          }
        }
      }

      .container3 {
        background-color: $base-white;
        // grid-row: 3 / 5;
        // grid-column: 3 / 4;
        padding-left: 20px;
        padding-right: 20px;

        .item-0 {
          grid-row: 1 / 2;
          grid-column: 1 / 4;
          font-weight: 700;
          font-size: 20px;
          color: #000;
        }

        .title-1 {
          line-height: 30px;
          margin-bottom: 25px;
          padding-left: 15px;
          font-size: 15px;
          background: url(@/assets/equipment/titleBgBlue.png);
          color: #2d83f4;
          background-repeat: no-repeat;
        }

        .container3-1 {
          width: 100%;

          .sub-container {
            width: calc(100% - 60px);
            display: grid;
            grid-template-rows: repeat(4, 40px);
            grid-template-columns: repeat(3, 33.33%);
            grid-row-gap: 20px;
            grid-column-gap: 30px;

            .item {
              background-color: #f5f6f7;
              line-height: 40px;
              padding: 0 15px;
              font-size: 14px;
              cursor: pointer;

              &:hover {
                background-color: #eaf3fe;
              }

              img {
                margin-right: 5px;
                vertical-align: middle;
              }

              span {
                vertical-align: middle;
              }

              .numNot {
                float: right;
                color: #999999;
              }

              .numHas {
                float: right;
                color: #000;
              }

              // 动态判定 数值为0 无hover效果
              .zeroPoint {
                pointer-events: none;
              }

              // 动态判定 数值不为0 才有hover效果
              .dataPoint {
                pointer-events: auto;
              }
            }
          }
        }

        .title-2 {
          margin-top: 40px;
        }
      }

      .container4 {
        background-color: $base-white;
        // grid-row: 4 / 6;
        // grid-column: 1 / 2;

        .title {
          height: 50px;
          padding-left: 20px;

          h3 {
            color: #000;
            font-size: 19px;
          }
        }
      }

      .container5 {
        background-color: $base-white;
        // grid-row: 4 / 6;
        // grid-column: 2 / 3;
        padding-left: 20px;
        padding-right: 20px;

        .title {
          img {
            vertical-align: middle;
            margin-right: 7px;
          }

          h3 {
            display: inline-block;
            color: #000;
            font-size: 19px;
          }

          span {
            float: right;
            font-size: 14px;
            color: #666;
            vertical-align: bottom;
            cursor: pointer;
            margin-top: 20px;
          }
        }

        .scrollContainer {
          height: 85%;
          overflow: hidden;
          position: relative;
          width: 100%;

          .emergencyResponse {
            position: absolute;
            width: 100%;
            top: 0;

            ul {
              padding: 0;
              margin: 0;

              li {
                line-height: 40px;
                vertical-align: middle;
                font-size: 14px;
                list-style: none;

                .name {
                  display: inline-block;
                  color: #3d566d;
                  text-decoration: none;
                  text-overflow: ellipsis;
                  width: 60%;
                  white-space: nowrap;
                  overflow: hidden;
                  line-height: 15px;

                  &:hover {
                    color: #6989a7;
                  }
                }

                .time {
                  float: right;
                  display: inline-block;
                  color: #999999;
                }
              }
            }
          }
        }
      }

      .container6 {
        background-color: $base-white;
        padding-left: 20px;

        .title {
          color: #f35c52;
          height: 50px;

          img {
            vertical-align: middle;
            margin-right: 7px;
          }

          h3 {
            font-size: 19px;
            display: inline-block;
            vertical-align: middle;
          }
        }

        .sub-container {
          width: calc(100% - 50px);
          display: grid;
          grid-template-rows: 130px;
          grid-template-columns: repeat(2, 50%);
          grid-row-gap: 20px;
          grid-column-gap: 30px;
          margin-top: 20px;

          .item {
            padding-top: 30px;
            padding-left: 30px;
          }

          span {
            vertical-align: middle;
          }

          .item-1 {
            background-color: #f2faff;

            .left {
              display: inline-block;

              .num {
                color: #39aea6;
                cursor: pointer;
                font-size: 30px;
              }

              .unit {
                font-size: 14px;
                color: #858b96;
              }

              .sta-down {
                color: #262626;
                font-size: 14px;
                line-height: 30px;
              }
            }

            img {
              float: right;
              margin-right: 30px;
              margin-top: 15px;
              vertical-align: middle;
            }
          }

          .item-2 {
            background-color: #fff5eb;

            .left {
              display: inline-block;

              .num {
                color: #f35c52;
                cursor: pointer;
                font-size: 30px;
              }

              .unit {
                font-size: 14px;
                color: #858b96;
              }

              .sta-down {
                color: #262626;
                font-size: 14px;
                line-height: 30px;
              }
            }

            img {
              float: right;
              margin-right: 30px;
              margin-top: 15px;
              vertical-align: middle;
            }
          }
        }
      }

      .container7 {
        background-color: $base-white;

        .title {
          padding-left: 20px;
          height: 50px;

          h3 {
            font-size: 19px;
            vertical-align: middle;
            color: #000;
          }
        }

        .DeviceRepair {
          .staContains {
            display: inline-block;
            width: 33%;
            text-align: center;

            span {
              display: block;
              text-align: center;
            }

            .Num {
              font-size: 25px;
              font-weight: 500;
              color: #222222;
            }

            .Description {
              font-size: 14px;
              color: #858b96;
            }
          }
        }
      }

      .container8 {
        background-color: $base-white;
        padding-left: 20px;
        padding-right: 20px;

        .title {
          height: 50px;

          h3 {
            color: #000;
            font-size: 19px;
            display: inline-block;
            vertical-align: middle;
          }

          .titleUnit {
            font-size: 14px;
            color: #666666;
            margin-left: 20px;
          }
        }
      }

      .container9 {
        background-color: $base-white;

        .title {
          padding-left: 20px;
          height: 50px;

          h3 {
            font-size: 19px;
            vertical-align: middle;
            color: #000;
            display: inline-block;
          }

          .titleUnit {
            font-size: 14px;
            color: #666666;
            margin-left: 20px;
          }
        }

        .DeviceRepair {
          margin-top: 20px;

          .staContains {
            display: inline-block;
            width: 33%;
            text-align: center;

            span {
              display: block;
              text-align: center;
            }

            .Num {
              font-size: 25px;
              font-weight: 500;
              color: #222222;
            }

            .Description {
              font-size: 14px;
              color: #858b96;
            }
          }
        }
      }

      .container10 {
        background-color: $base-white;
        padding-left: 20px;
        padding-right: 20px;

        .title {
          height: 50px;

          h3 {
            color: #000;
            font-size: 19px;
            vertical-align: middle;
          }
        }

        .pollingContainer {
          height: 320px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          .chart2 {
            height: 75%;
            width: 90%;
            margin-left: -15%;
            margin-top: 2%;
            position: relative;
            display: inline-block;
            cursor: pointer;
          }

          .leftSta {
            width: 20%;
            font-size: 14px;
            color: #858b96;
            text-align: center;
            vertical-align: middle;
            display: inline-block;

            .staItem {
              &:last-child {
                margin-top: 50px;
              }
            }

            .num {
              display: block;
              font-size: 27px;
              color: #222222;
            }
          }
        }
      }

      .container11 {
        background-color: $base-white;
        padding-left: 20px;
        padding-right: 20px;

        .title {
          height: 50px;

          h3 {
            color: #000;
            font-size: 19px;
            vertical-align: middle;
          }
        }

        .pollingContainer {
          height: 320px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          .chart2 {
            height: 75%;
            width: 90%;
            margin-left: -15%;
            margin-top: 2%;
            position: relative;
            display: inline-block;
            cursor: pointer;
          }

          .leftSta {
            width: 20%;
            font-size: 14px;
            color: #858b96;
            text-align: center;
            vertical-align: middle;
            display: inline-block;

            .staItem {
              &:last-child {
                margin-top: 50px;
              }
            }

            .num {
              display: block;
              font-size: 27px;
              color: #222222;
            }
          }
        }
      }

      .container12 {
        background-color: $base-white;
        padding-left: 20px;

        .title {
          height: 50px;

          h3 {
            color: #000;
            font-size: 19px;
            vertical-align: middle;
            display: inline-block;
          }

          .titleUnit {
            font-size: 14px;
            color: #666666;
            margin-left: 20px;
          }
        }

        .sub-container {
          width: calc(100% - 20px);
          height: calc(340px - 70px);
          display: grid;
          grid-template-rows: repeat(2, 50%);
          grid-template-columns: repeat(2, 50%);
          grid-gap: 20px;
          margin-top: 20px;

          .item {
            background-color: #f8f8f8;
            padding-top: 40px;
            padding-left: 20px;

            img {
              vertical-align: middle;
              margin-right: 10px;
            }

            .i-sSta {
              display: inline-block;
              vertical-align: middle;
              font-size: 14px;
              color: #000;

              span {
                vertical-align: middle;
              }

              .num {
                display: block;
                font-size: 23px;
                margin-bottom: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>